<!--
 * @Description: 
 * @Version: 1.0
 * @Author: Yuanjy
 * @Date: 2020-04-02 22:51:38
 * @LastEditors: Yuanjy
 * @LastEditTime: 2020-05-29 13:29:29
 -->
<template>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane v-for="(item, index) in evalInfo" :label="item.title" :key="index">
        <div class="left-eval user-box">
          <div class="tit">答题记录</div>
          <el-table :data="item.answer" max-height="600">
            <el-table-column property="index" label="题号" width="65" />
            <el-table-column property="title" label="问题" />
            <el-table-column property="answer" label="答案">
              <template slot-scope="scope">
                <span>{{ scope.row.answer.answer ? scope.row.answer.answer : scope.row.answer }}</span>
                <i v-if="scope.row.title.indexOf('您的体重') !== -1 || scope.row.title.indexOf('您的身高') !== -1" class="i-icon icon-revamp" @click="showUpdateWeight(scope.row.answer.answer ? scope.row.answer.answer : scope.row.answer, scope.row.index)" />
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="left-right">
          <div class="user-box tab-pane-user-box">
            <div class="tit">重点信息</div>
            <div class="user-content pd20-10 record">
              <p v-if="item.intro!==''" class="pd20-10 bg-blue" v-html="item.intro" />
              <div v-else class="pd20-10 bg-blue">
                <span v-for="(item1, index) in item.info" :key="index">{{ item1.title }}：{{ item1.answer }}</span>
              </div>
            </div>
          </div>
          <div v-if="item.program && item.program !== ''" class="user-box tab-pane-user-box">
            <div class="tit">中间值及减脂方案</div>
            <div class="user-content pd20-10 record">
              <p class="pd20-10 bg-blue" v-html="item.program" />
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <span v-if="evalInfo.length <= 0"> 当前订单暂无完成的测评信息 </span>
    <el-dialog :append-to-body="true" :visible.sync="updateWeightShow" title="测评体重修改" width="500px">
      <el-row>
        <el-col :span="4">
          <p class="p-weight">体重</p>
        </el-col>
        <el-col :span="20">
          <el-input v-model="weightCount" type="number" size="small" />
        </el-col>        
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="updateWeightShow = false">取 消</el-button>
        <el-button type="primary" size="small" @click="updateWeight">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>

export default {
  data() {
    return {
      activeName: '',
      evalInfo: [],
      updateWeightShow: false,
      weightCount: 0,
      serviceId: 0,
      editIndex: 0,
      currentTid: 0
    }
  },
  methods: {
    initData(serviceId) {
      this.serviceId = serviceId
      this.$api.order.service
        .evalInfo(serviceId)
        .then(res => {
          this.evalInfo = res.data.eval_info
          if (this.evalInfo) {
            this.currentTid = this.evalInfo[0].tid
          }
        }).catch(err => {
          console.log(err)
        })
    },
    showUpdateWeight(value, index) {
      this.weightCount = value
      this.editIndex = index
      this.updateWeightShow = true
    },
    updateWeight() {
      let param = {
        service_id: this.serviceId,
        tid: this.currentTid,
        index: this.editIndex,
        weight: this.weightCount
      }
      this.$api.order.service
        .updateEvalWeight({
          data: param
        }).then(res => {
          this.updateWeightShow = false
          this.$notify({ title: '体重', message: '修改成功', type: 'success', duration: 2500 })
          this.initData(this.serviceId)
        }).catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style scoped>
.left-eval {
  float: left;
  width: 48%;
}
.left-right {
  float: left;
  width: 50%;
  margin-left: 2%;
}
.user-box {
  border-top: 2px solid #4392bc;
  border-bottom: 1px solid rgba(67, 146, 188, 0.4);
  border-radius: 4px;
  margin-bottom: 30px;
}
.recipe.user-box{
  margin-top: 15px;
}
.user-box .tit {
  height: 38px;
  line-height: 38px;
  font-size: 16px;
  color: #200;
  text-indent: 10px;
}
.user-box .user-content {
  border-top: 1px solid #3cb9fc;
}
.user-content.record {
  font-size: 15px;
  color: #fff;
  line-height: 25px;
}
.userinfo-box {
  background: #ddeff4;
  margin-bottom: 10px;
}
.bg-blue {
  background: #3cb9fc;
}
.remark-btn {
  position: absolute;
  right: 30px;
  top: -5px;
  width: 600px;
}
</style>
